<template>
  <div class="padding flex height-100 content-with-tree">
    <div class="flex direction-column height-100 right-content">
      <div class="search-form">
        <el-form inline>
          <year-month-picker v-model="time" :allow-date="false"></year-month-picker>
          <el-form-item label="所属区域">
            <area-picker v-model="area"></area-picker>
          </el-form-item>
          <el-form-item label="关键字">
            <el-input v-model="keyword"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" @click="clickSearch">
              查询
            </el-button>
          </el-form-item>
        </el-form>
      </div>
      <el-table
        ref="table"
        v-loading="loading"
        :data="lists"
        height="100%"
        :header-cell-style="{
          backgroundColor: themeColor,
          color: 'white',
          textAlign: 'center'
        }"
        :cell-style="{
          textAlign: 'center'
        }"
      >
        <el-table-column
          v-for="(column, index) in columns"
          :key="index"
          v-bind="column"
          :width="index < 2 ? 200 : ''"
          :fixed="index < 2"
        >
          <template v-if="needWrapUnit(column.label)" #header>
            <div class="wrap-unit-in-thead-name">{{ wrapUnit(column.label).name }}</div>
            <div class="wrap-unit-in-thead-unit">{{ wrapUnit(column.label).unit }}</div>
          </template>
          <template v-if="column.prop === 'industryName'" #default="{ row }">
            <el-link
              :underline="false"
              type="primary"
              @click="
                navigateToEnterpriseAnalysis({ industryCode: row.industryCode }, 'industryCode')
              "
            >
              {{ row.industryName }}
            </el-link>
          </template>
          <template v-else-if="column.prop === 'enterpriseName'" #default="{ row }">
            <el-link
              :underline="false"
              type="primary"
              @click="
                navigateToEnterpriseAnalysis(row, 'enterpriseCode')
              "
            >
              {{ row.enterpriseName }}
            </el-link>
          </template>
          <template v-if="column.children">
            <el-table-column
              v-for="(child, index) in column.children"
              :key="index"
              v-bind="child"
            >
              <template v-if="needWrapUnit(child.label)" #header>
                <div class="wrap-unit-in-thead-name">{{ wrapUnit(child.label).name }}</div>
                <div class="wrap-unit-in-thead-unit">{{ wrapUnit(child.label).unit }}</div>
              </template>
            </el-table-column>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import AreaPicker from '@/components/area-picker';
import YearMonthPicker, { getTimeTypeFromTime } from '@/components/year-month-picker';
import Navigate2enterpriseAnalysis from '@/mixins/navigate2enterpriseAnalysis';
import MixinWrapUnitInThead from '@/mixins/wrap-unit-in-thead';

import { getComprehensiveReport } from '@/api/energy';

export default {
  name: 'energy-efficiency-analysis-comprehensive',
  components: {
    AreaPicker,
    YearMonthPicker,
  },
  mixins: [Navigate2enterpriseAnalysis, MixinWrapUnitInThead],
  data() {
    return {
      keyword: '',
      time: '',
      area: '',
      loading: false,
      lists: [],
      columns: [],
    };
  },
  computed: {
    themeColor() {
      return this.$store.state.user.theme;
    },
    qs() {
      return {
        keyword: this.keyword || undefined,
        time: this.time,
        timeType: getTimeTypeFromTime(this.time),
        areaCode: this.area || undefined,
      };
    }
  },
  mounted() {
    this.getTableData();
  },
  methods: {
    async getTableData () {
      this.loading = true;
      try {
        const { data } = await getComprehensiveReport(this.qs);
        this.columns = data.thead || [];

        const keys = ['districtCode', 'districtName', 'enterpriseCode', 'enterpriseName', 'enterpriseId'];
        (data.tbody || []).forEach(item => {
          Object.keys(item).forEach(key => {
            if (!keys.includes(key)) {
              item[key] = item[key] || '-';
            }
          })

          const excludeKeys = [
            'COMPREHENSIVE_ENERGY_CONSUMPTION',
            'COMPREHENSIVE_ENERGY_CONSUMPTIONYoy',
            'INDUSTRIAL_OUTPUT',
            'INDUSTRIAL_OUTPUTYoy',
            'COMPANIES_OUTPUT',
            'COMPANIES_OUTPUTYoy'
          ]
          excludeKeys.forEach(key => {
            item[key] = item[key] || '-'
          })
        });
        this.lists = data.tbody || [];
      } catch (e) {
        console.warn(e);
      } finally {
        this.loading = false;
      }
      this.$nextTick(() => {
        this.$refs.table.doLayout();
      })
    },
    clickSearch() {
      this.getTableData();
    },
  }
};
</script>
